<template>
  <div class="msg-content">
    <div class="msg-title">
      {{msg.title}}
    </div>
    <div class="msg-con" v-html="msg.content"></div>
    <div class="msg-time">
      发送时间：{{new Date(msg.time * 1000).toLocaleString()}}
    </div>
  </div>
</template>

<script>
import {Message} from "../../utils/http/messages";

export default {
  name: "MessageDetail",
  props: ['id'],
  data : function (){
    return {
      msg : {},
      did : this.$props.id
    }
  },
  methods:{
    async refresh(){
      let resp = await Message.getById(this.did)
      if(!resp.success) {
        this.$error("获取信箱失败")
      }else {
        resp.data.content = resp.data.content.replaceAll("\n","<br/>")
        this.msg = resp.data;
      }
    }
  },
  watch: {
    id(nv){
      this.did = nv
      this.refresh()
    }
  },
  async mounted() {
    this.refresh()
  }
}
</script>

<style scoped>
.msg-content{
  width: 450px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.msg-title {
  font-size: 20px;
}
.msg-con{
  margin-top: 40px;
  height: 260px;
  font-size: 16px;
  text-align: left;
  width: 300px;
}
.msg-time {
  margin-top: 5px;
  font-size: 14px;
  color: #409eff;
}
</style>